// Component:		  Variables
//
// Description:		Define all variables
//
// ========================================================================



// Global variables
// ========================================================================


// Black - White - Gray
// ------------------------------------------------------------------------

@black:           #000;
@white:           #fff;

@gray-darker:     lighten(@black, 13.5%); // #222
@gray-dark:       lighten(@black, 20%);   // #333
@gray:            lighten(@black, 33.5%); // #555
@gray-light:      lighten(@black, 60%);   // #999
@gray-lighter:    lighten(@black, 93.5%); // #eee


// Brand Colors
// ------------------------------------------------------------------------

@global-primary:	    #0e90d2; // #157EFB; //#428bca;
@global-secondary:    lighten(@global-primary, 15%);
@global-success:	    #5eb95e; // #53D76A; //#5cb85c;
@global-warning:	    #F37B1D; // #FD9426; // #f0ad4e;
@global-danger:		    #dd514c; // #FC3159; //#da314b;
@global-info:         @global-secondary;


// body
// ------------------------------------------------------------------------

@body-bg:               @white;
@text-color:            @gray-dark;


// Links
// ------------------------------------------------------------------------

@link-color:              @global-primary;
@link-hover-color:        darken(@link-color, 15%);

@global-contrast-color:	  @white;


// Backgrounds & Borders
// ------------------------------------------------------------------------

@global-background:				@white;
@global-border:					  #ddd;


// Typography
// ========================================================================

// Font family
// ------------------------------------------------------------------------

// FreeSans: Ships with many Linux distros, including Ubuntu
// Arimo: Ships with Chrome OS. Arimo has to be defined before Helvetica and
//        Arial to get picked up by the browser, even though neither is available
//        in Chrome OS.
// Droid Sans: Ships with all versions of Android.
// Roboto: Android new font-family from Android ISC
// Helvetica, Arial, sans-serif: Common font stack on OS X and Windows.
// Helvetica Neue: iOS & OS X 10.10 UI font (not Lucida Grande any more)
//                 http://morrick.me/archives/6873
// http://www.kendraschaefer.com/2012/06/chinese-standard-web-fonts-the-ultimate-guide-to-css-font-family-declarations-for-web-design-in-simplified-chinese/

// Helvetica

// apple.com: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana,

@font-family-sans-serif: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans","wenquanyi micro hei","Hiragino Sans GB", "Hiragino Sans GB W3", sans-serif;

@font-family-serif: Georgia, "Times New Roman", Times, SimSun, serif; //FangSong, STFangSong

@font-family-monospace: Monaco, Menlo, Consolas, "Courier New", monospace;

@font-family-kai: Georgia, 'Times New Roman', Times, Kai, 'Kaiti SC', KaiTi, BiauKai, serif;;


// Font  size
// ------------------------------------------------------------------------

@global-font-size:				1.6rem; //16px
@global-line-height:			1.6;
@font-size-base:          @global-font-size;

@line-height-base:        @global-line-height;
@line-height-computed:    floor(@font-size-base * @line-height-base); // 2


@font-size-xxs:           @global-font-size - 0.6; // 10px - 1rem
@font-size-xs:            @global-font-size - 0.4; // 12px
@font-size-sm:            @global-font-size - 0.2; // 14px
//@font-size-default:     @global-font-size;       // 16px
@font-size-lg:            @global-font-size + 0.2; // 18px
@font-size-xl:            @global-font-size + 0.8; // 24px
@font-size-xxl:           @global-font-size * 2;   // 32px
@font-size-xxxl:          @global-font-size * 2 + 1; // 42px



// Global spacing
// ========================================================================

@global-spacing:                1.6rem;

@global-spacing-xs:             0.5rem;
@global-spacing-sm:             1rem;
@global-spacing-lg:             2.4rem;
@global-spacing-xl:             3.2rem;


// Margin
// ------------------------------------------------------------------------

@global-margin:									  @global-spacing;

@global-margin-xs:							  @global-spacing-xs;
@global-margin-sm:							  @global-spacing-sm;

@global-margin-lg:							  @global-spacing-lg;
@global-margin-xl:							  @global-spacing-xl;


// Controls
// @global-height:									  30px;
// @global-mini-height:							20px;
// @global-small-height:							25px;
// @global-large-height:							40px;


// Border radius
// ------------------------------------------------------------------------

@global-border-radius:           2px;
@border-radius-large:            5px;
@border-radius-small:            1px;



// Responsive variables
// ========================================================================

// Breakpoint
// ------------------------------------------------------------------------

@breakpoint-small:            640px;  // 0 - 640px
@breakpoint-medium:           1024px; // 641 - 1024px
@breakpoint-large:            1280px; // 1025 - 1280px
@breakpoint-xl:               1440px; // 1281 - 1440px
@breakpoint-xxl:              1920px; // 1441 -1920px

@breakpoint-small-max:        @breakpoint-small;
@breakpoint-md:               @breakpoint-small-max; // legacy var, DO NOT USE IT

@breakpoint-medium-min:       (@breakpoint-small + 1);
@breakpoint-medium-max:       @breakpoint-medium;

@breakpoint-large-min:        (@breakpoint-medium + 1);
@breakpoint-large-max:        @breakpoint-large;

@breakpoint-xl-min:           (@breakpoint-large + 1);
@breakpoint-xl-max:           @breakpoint-xl;

@breakpoint-xxl-min:          (@breakpoint-xl + 1);
@breakpoint-xxl-max:          @breakpoint-xxl;


// Media Queries
// NOTE '~' in the beginning - media query must be escaped
// ------------------------------------------------------------------------

@screen:        ~"only screen";

@landscape:     ~"@{screen} and (orientation: landscape)";
@portrait:      ~"@{screen} and (orientation: portrait)";

@small-up:      ~"@{screen}";
@small-only:    ~"@{screen} and (max-width: @{breakpoint-small-max})";

@medium-up:     ~"@{screen} and (min-width:@{breakpoint-medium-min})";
@medium-only:   ~"@{screen} and (min-width:@{breakpoint-medium-min}) and (max-width:@{breakpoint-medium-max})";

@large-up:      ~"@{screen} and (min-width:@{breakpoint-large-min})";
@large-only:    ~"@{screen} and (min-width:@{breakpoint-large-min}) and (max-width:@{breakpoint-large-max})";

@xl-up:         ~"@{screen} and (min-width:@{breakpoint-xl-min})";
@xl-only:       ~"@{screen} and (min-width:@{breakpoint-xl-min}) and (max-width:@{breakpoint-xl-max})";

@xxl-up:        ~"@{screen} and (min-width:@{breakpoint-xxl-min})";
@xxl-only:      ~"@{screen} and (min-width:@{breakpoint-xxl-min}) and (max-width:@{breakpoint-xxl-max})";


// Grid system
// ------------------------------------------------------------------------

@grid-columns:              12;

@grid-gutter-width:         1rem;   // Columns padding
@grid-gutter-md-width:      1.5rem; // 15px

@grid-max-width:            1000px;



// Z-index
// =======================================================================

@global-z-index:		        1000;

@z-index-navbar:            @global-z-index + 20; // THIS IS WIDGET

@z-index-dropdown:          @global-z-index;
@z-index-popover:           @global-z-index + 10;
@z-index-tooltip:           @global-z-index + 30;
@z-index-navbar-fixed:      @global-z-index + 30;
@z-index-modal-background:  @global-z-index + 40;
@z-index-modal:             @global-z-index + 50;
@z-index-paragraph:         @global-z-index + 60;  // THIS IS WIDGET
@z-index-figure:            @global-z-index + 60;
@z-index-sticky:            @global-z-index + 19;
@z-index-mainnav:           @global-z-index + 30;

@z-index-dimmer:            @global-z-index + 20;



// ========================================================================
// Component Common
// ========================================================================

@component-active-color:         #fff;
@component-active-bg:            @global-primary;



// ========================================================================
// Components variables
// ========================================================================

// Base
// ========================================================================

@base-background:							@global-background;
@base-font-family:					  @font-family-sans-serif;
@base-font-weight:						normal;
@base-font-size:							@global-font-size;
@base-line-height:						@global-line-height;
@base-text-color:						  @gray-dark;

// em element
@base-em-color:									#D05;

// ins element
@base-ins-background:						#ffa;
@base-ins-color:								@gray-dark;

// mark element
@base-mark-background:					#ffa;
@base-mark-color:								@gray-dark;

// selection
@base-selection-background:			@global-primary;
@base-selection-color:					@white;

@base-margin-vertical:					@global-spacing;

// h1 - h6 element
@base-heading-font-weight:				  600;
@base-heading-margin-top:						2em;

// hr
@base-hr-border:								@gray-lighter;

// blockquote
@base-blockquote-border:						  @global-border;
@base-blockquote-small-color:					@gray-light;
@base-blockquote-font-size:						1.6rem; // 16px
@base-blockquote-line-height:					1.5; // 22px



// ========================================================================
// Buttons
// ========================================================================

@btn-font-weight:                normal;
@btn-line-height:                1.2;
@btn-font-size:                  @global-font-size;

@btn-default-color:              @gray-dark;
@btn-default-bg:                 #e6e6e6;
@btn-default-border:             transparent;

@btn-primary-color:              #fff;
@btn-primary-bg:                 @global-primary;
@btn-primary-border:             darken(@btn-primary-bg, 5%);

@btn-secondary-color:            #fff;
@btn-secondary-bg:               @global-secondary;
@btn-secondary-border:           darken(@btn-secondary-bg, 5%);

@btn-success-color:              #fff;
@btn-success-bg:                 @global-success;
@btn-success-border:             darken(@btn-success-bg, 5%);

@btn-warning-color:              #fff;
@btn-warning-bg:                 @global-warning;
@btn-warning-border:             darken(@btn-warning-bg, 5%);

@btn-danger-color:               #fff;
@btn-danger-bg:                  @global-danger;
@btn-danger-border:              darken(@btn-danger-bg, 5%);

@btn-link-disabled-color:        @gray-light;

@btn-lg-font-size:      @font-size-lg;
@btn-sm-font-size:      @font-size-sm;
@btn-xs-font-size:      @font-size-xs;



// ========================================================================
// Code variables
// ========================================================================

@code-color:                  #c7254e;
@code-bg:                     #f8f8f8;
@code-font-size:              1.3rem;

@pre-bg:                      @code-bg;
@pre-color:                   @gray;
@pre-border:                  1px solid #dedede;
@pre-scrollable-max-height:   24rem;



// ========================================================================
// Forms
// ========================================================================

@form-font-size:    @global-font-size;
@form-line-height:  1.2;

@form-font-size-sm: @font-size-sm;
@form-font-size-lg: @font-size-lg;

@input-padding:                 0.625em;

@input-bg:                       #fff;
@input-focus-bg:                 #fafffe;
@input-bg-disabled:              @gray-lighter;

@input-color:                    @gray;
@input-border:                   #ccc;
@input-border-radius: @global-border-radius;
@input-border-focus:             @global-primary;

@input-color-placeholder:        @gray-light;

@legend-color:                   @gray-dark;
@legend-border-color:            #e5e5e5;

@form-select-height:     @form-font-size * @form-line-height + @form-font-size * 0.5 * 2;
@form-select-height-lg:  @form-font-size-lg * @form-line-height + @form-font-size-lg * 0.5 * 2;
@form-select-height-sm:  @form-font-size-sm * @form-line-height + @form-font-size-sm * 0.5 * 2;


// Form states and alerts
// ------------------------------------------------------------------------

@state-success-text:             @global-success;
@state-success-border:           darken(@state-success-text, 5%);

@state-warning-text:             @global-warning;
@state-warning-border:           darken(@state-warning-text, 5%);

@state-danger-text:              @global-danger;
@state-danger-border:            darken(@state-danger-text, 5%);


// ========================================================================
// Input-group variables
// ========================================================================

@input-group-label-bg:            @gray-lighter;
@input-group-label-border-color:  #ccc;



// ========================================================================
// Image variables
// ========================================================================

@img-border-radius: @global-border-radius;
@img-thumbnail-padding:   2px;
@img-thumbnail-bg:        @white;
@img-thumbnail-bd-color:  @global-border;
@img-thumbnail-bd-radius: @global-border-radius;



// ========================================================================
// Table variables
// ========================================================================

@table-cell-padding:          .7rem;
@table-line-height:           @global-line-height;
@table-bg:                    transparent; // overall background-color
@table-bg-striped:            #f9f9f9;
@table-bg-hover:              #f5f5f5;
@table-bg-active:             #ffd;
@table-border-color:          #ddd; // table and cell border



// ========================================================================
// Article variables
// ========================================================================

@article-margin-top:                            2.4rem;

@article-title-font-size:                2.8rem;
@article-title-line-height:              1.15;
@article-title-font-weight:              normal;

@article-meta-font-size:                 1.2rem;
@article-meta-line-height:               1.5;
@article-meta-color:                     @gray-light;

@article-lead-color:                     #666;
@article-lead-font-size:                 1.4rem;
@article-lead-line-height:               1.5;

@article-content-font-size:              1.6rem;

@article-divider-margin:                 2.4rem;
@article-divider-border:                 @gray-lighter;



// ========================================================================
// Badge variables
// ========================================================================

@badge-color:                 #fff;
@badge-link-hover-color:      #fff;
@badge-bg:                    @gray-light;

@badge-active-color:          @link-color;
@badge-active-bg:             #fff;

@badge-font-weight:           bold;
@badge-line-height:           1;
@badge-border-radius:         0.8rem;

@badge-primary-bg:						@global-primary;
@badge-secondary-bg:          @global-secondary;
@badge-success-bg:						@global-success;
@badge-warning-bg:						@global-warning;
@badge-danger-bg:						  @global-danger;



// ========================================================================
// Breadcrumb variables
// ========================================================================

@breadcrumb-bg:               transparent;//#f5f5f5;
@breadcrumb-font-size:        85%;
@breadcrumb-divider-color:    #ccc;
@breadcrumb-active-color:     @gray-light;
@breadcrumb-separator:        "/";


// ========================================================================
// Close variables
// ========================================================================

@close-font-weight:           bold;
@close-color:                 #000;
@close-text-shadow:           0 1px 0 #fff;
@close-alt-background:		    #eee;



// ========================================================================
// Comment variables
// ========================================================================

@comment-border-radius:         2px;
@comment-border-color:          #dedede;

@comment-avatar-size:           48px;
@comment-avatar-margin:         16px;

@comment-hd-bg-color:           #f8f8f8;
@comment-hd-padding-vertical:   10px;

@comment-title-margin-btm:      8px;
@comment-title-font-size:       @font-size-base;
@comment-title-line-height:     1.2;

@comment-meta-color:            @gray-light;
@comment-meta-font-size:        13px;
@comment-meta-line-height:      1.2;

@comment-bd-padding: 15px;

@comment-list-margin-top:       @global-spacing;

// Highlight color
@comment-hl-border-color:       lighten(@global-primary, 35%);


// ========================================================================
// Icon variables
// ========================================================================

@icon-sm-font-size:              150%;
@icon-md-font-size:              200%;
@icon-lg-font-size:              250%;

@icon-sm-vertical-align:         -10%;
@icon-md-vertical-align:         -16%;
@icon-lg-vertical-align:         -22%;

@icon-btn-width: 							  48px;
@icon-btn-height: 							@icon-btn-width;
@icon-btn-border-radius: 			  50%;
@icon-btn-background: 					#eee;
@icon-btn-font-size: 					  @icon-btn-width * 0.5;
@icon-btn-color: 							  @gray;

@icon-btn-hover-background: 		#f5f5f5;
@icon-btn-hover-color: 				  @gray-dark;

@icon-btn-active-background: 	  #ddd;
@icon-btn-active-color: 				@gray-dark;


@fa-var-adjust: "\f042";
@fa-var-adn: "\f170";
@fa-var-align-center: "\f037";
@fa-var-align-justify: "\f039";
@fa-var-align-left: "\f036";
@fa-var-align-right: "\f038";
@fa-var-ambulance: "\f0f9";
@fa-var-anchor: "\f13d";
@fa-var-android: "\f17b";
@fa-var-angle-double-down: "\f103";
@fa-var-angle-double-left: "\f100";
@fa-var-angle-double-right: "\f101";
@fa-var-angle-double-up: "\f102";
@fa-var-angle-down: "\f107";
@fa-var-angle-left: "\f104";
@fa-var-angle-right: "\f105";
@fa-var-angle-up: "\f106";
@fa-var-apple: "\f179";
@fa-var-archive: "\f187";
@fa-var-arrow-circle-down: "\f0ab";
@fa-var-arrow-circle-left: "\f0a8";
@fa-var-arrow-circle-o-down: "\f01a";
@fa-var-arrow-circle-o-left: "\f190";
@fa-var-arrow-circle-o-right: "\f18e";
@fa-var-arrow-circle-o-up: "\f01b";
@fa-var-arrow-circle-right: "\f0a9";
@fa-var-arrow-circle-up: "\f0aa";
@fa-var-arrow-down: "\f063";
@fa-var-arrow-left: "\f060";
@fa-var-arrow-right: "\f061";
@fa-var-arrow-up: "\f062";
@fa-var-arrows: "\f047";
@fa-var-arrows-alt: "\f0b2";
@fa-var-arrows-h: "\f07e";
@fa-var-arrows-v: "\f07d";
@fa-var-asterisk: "\f069";
@fa-var-automobile: "\f1b9";
@fa-var-backward: "\f04a";
@fa-var-ban: "\f05e";
@fa-var-bank: "\f19c";
@fa-var-bar-chart-o: "\f080";
@fa-var-barcode: "\f02a";
@fa-var-bars: "\f0c9";
@fa-var-beer: "\f0fc";
@fa-var-behance: "\f1b4";
@fa-var-behance-square: "\f1b5";
@fa-var-bell: "\f0f3";
@fa-var-bell-o: "\f0a2";
@fa-var-bitbucket: "\f171";
@fa-var-bitbucket-square: "\f172";
@fa-var-bitcoin: "\f15a";
@fa-var-bold: "\f032";
@fa-var-bolt: "\f0e7";
@fa-var-bomb: "\f1e2";
@fa-var-book: "\f02d";
@fa-var-bookmark: "\f02e";
@fa-var-bookmark-o: "\f097";
@fa-var-briefcase: "\f0b1";
@fa-var-btc: "\f15a";
@fa-var-bug: "\f188";
@fa-var-building: "\f1ad";
@fa-var-building-o: "\f0f7";
@fa-var-bullhorn: "\f0a1";
@fa-var-bullseye: "\f140";
@fa-var-cab: "\f1ba";
@fa-var-calendar: "\f073";
@fa-var-calendar-o: "\f133";
@fa-var-camera: "\f030";
@fa-var-camera-retro: "\f083";
@fa-var-car: "\f1b9";
@fa-var-caret-down: "\f0d7";
@fa-var-caret-left: "\f0d9";
@fa-var-caret-right: "\f0da";
@fa-var-caret-square-o-down: "\f150";
@fa-var-caret-square-o-left: "\f191";
@fa-var-caret-square-o-right: "\f152";
@fa-var-caret-square-o-up: "\f151";
@fa-var-caret-up: "\f0d8";
@fa-var-certificate: "\f0a3";
@fa-var-chain: "\f0c1";
@fa-var-chain-broken: "\f127";
@fa-var-check: "\f00c";
@fa-var-check-circle: "\f058";
@fa-var-check-circle-o: "\f05d";
@fa-var-check-square: "\f14a";
@fa-var-check-square-o: "\f046";
@fa-var-chevron-circle-down: "\f13a";
@fa-var-chevron-circle-left: "\f137";
@fa-var-chevron-circle-right: "\f138";
@fa-var-chevron-circle-up: "\f139";
@fa-var-chevron-down: "\f078";
@fa-var-chevron-left: "\f053";
@fa-var-chevron-right: "\f054";
@fa-var-chevron-up: "\f077";
@fa-var-child: "\f1ae";
@fa-var-circle: "\f111";
@fa-var-circle-o: "\f10c";
@fa-var-circle-o-notch: "\f1ce";
@fa-var-circle-thin: "\f1db";
@fa-var-clipboard: "\f0ea";
@fa-var-clock-o: "\f017";
@fa-var-cloud: "\f0c2";
@fa-var-cloud-download: "\f0ed";
@fa-var-cloud-upload: "\f0ee";
@fa-var-cny: "\f157";
@fa-var-code: "\f121";
@fa-var-code-fork: "\f126";
@fa-var-codepen: "\f1cb";
@fa-var-coffee: "\f0f4";
@fa-var-cog: "\f013";
@fa-var-cogs: "\f085";
@fa-var-columns: "\f0db";
@fa-var-comment: "\f075";
@fa-var-comment-o: "\f0e5";
@fa-var-comments: "\f086";
@fa-var-comments-o: "\f0e6";
@fa-var-compass: "\f14e";
@fa-var-compress: "\f066";
@fa-var-copy: "\f0c5";
@fa-var-credit-card: "\f09d";
@fa-var-crop: "\f125";
@fa-var-crosshairs: "\f05b";
@fa-var-css3: "\f13c";
@fa-var-cube: "\f1b2";
@fa-var-cubes: "\f1b3";
@fa-var-cut: "\f0c4";
@fa-var-cutlery: "\f0f5";
@fa-var-dashboard: "\f0e4";
@fa-var-database: "\f1c0";
@fa-var-dedent: "\f03b";
@fa-var-delicious: "\f1a5";
@fa-var-desktop: "\f108";
@fa-var-deviantart: "\f1bd";
@fa-var-digg: "\f1a6";
@fa-var-dollar: "\f155";
@fa-var-dot-circle-o: "\f192";
@fa-var-download: "\f019";
@fa-var-dribbble: "\f17d";
@fa-var-dropbox: "\f16b";
@fa-var-drupal: "\f1a9";
@fa-var-edit: "\f044";
@fa-var-eject: "\f052";
@fa-var-ellipsis-h: "\f141";
@fa-var-ellipsis-v: "\f142";
@fa-var-empire: "\f1d1";
@fa-var-envelope: "\f0e0";
@fa-var-envelope-o: "\f003";
@fa-var-envelope-square: "\f199";
@fa-var-eraser: "\f12d";
@fa-var-eur: "\f153";
@fa-var-euro: "\f153";
@fa-var-exchange: "\f0ec";
@fa-var-exclamation: "\f12a";
@fa-var-exclamation-circle: "\f06a";
@fa-var-exclamation-triangle: "\f071";
@fa-var-expand: "\f065";
@fa-var-external-link: "\f08e";
@fa-var-external-link-square: "\f14c";
@fa-var-eye: "\f06e";
@fa-var-eye-slash: "\f070";
@fa-var-facebook: "\f09a";
@fa-var-facebook-square: "\f082";
@fa-var-fast-backward: "\f049";
@fa-var-fast-forward: "\f050";
@fa-var-fax: "\f1ac";
@fa-var-female: "\f182";
@fa-var-fighter-jet: "\f0fb";
@fa-var-file: "\f15b";
@fa-var-file-archive-o: "\f1c6";
@fa-var-file-audio-o: "\f1c7";
@fa-var-file-code-o: "\f1c9";
@fa-var-file-excel-o: "\f1c3";
@fa-var-file-image-o: "\f1c5";
@fa-var-file-movie-o: "\f1c8";
@fa-var-file-o: "\f016";
@fa-var-file-pdf-o: "\f1c1";
@fa-var-file-photo-o: "\f1c5";
@fa-var-file-picture-o: "\f1c5";
@fa-var-file-powerpoint-o: "\f1c4";
@fa-var-file-sound-o: "\f1c7";
@fa-var-file-text: "\f15c";
@fa-var-file-text-o: "\f0f6";
@fa-var-file-video-o: "\f1c8";
@fa-var-file-word-o: "\f1c2";
@fa-var-file-zip-o: "\f1c6";
@fa-var-files-o: "\f0c5";
@fa-var-film: "\f008";
@fa-var-filter: "\f0b0";
@fa-var-fire: "\f06d";
@fa-var-fire-extinguisher: "\f134";
@fa-var-flag: "\f024";
@fa-var-flag-checkered: "\f11e";
@fa-var-flag-o: "\f11d";
@fa-var-flash: "\f0e7";
@fa-var-flask: "\f0c3";
@fa-var-flickr: "\f16e";
@fa-var-floppy-o: "\f0c7";
@fa-var-folder: "\f07b";
@fa-var-folder-o: "\f114";
@fa-var-folder-open: "\f07c";
@fa-var-folder-open-o: "\f115";
@fa-var-font: "\f031";
@fa-var-forward: "\f04e";
@fa-var-foursquare: "\f180";
@fa-var-frown-o: "\f119";
@fa-var-gamepad: "\f11b";
@fa-var-gavel: "\f0e3";
@fa-var-gbp: "\f154";
@fa-var-ge: "\f1d1";
@fa-var-gear: "\f013";
@fa-var-gears: "\f085";
@fa-var-gift: "\f06b";
@fa-var-git: "\f1d3";
@fa-var-git-square: "\f1d2";
@fa-var-github: "\f09b";
@fa-var-github-alt: "\f113";
@fa-var-github-square: "\f092";
@fa-var-gittip: "\f184";
@fa-var-glass: "\f000";
@fa-var-globe: "\f0ac";
@fa-var-google: "\f1a0";
@fa-var-google-plus: "\f0d5";
@fa-var-google-plus-square: "\f0d4";
@fa-var-graduation-cap: "\f19d";
@fa-var-group: "\f0c0";
@fa-var-h-square: "\f0fd";
@fa-var-hacker-news: "\f1d4";
@fa-var-hand-o-down: "\f0a7";
@fa-var-hand-o-left: "\f0a5";
@fa-var-hand-o-right: "\f0a4";
@fa-var-hand-o-up: "\f0a6";
@fa-var-hdd-o: "\f0a0";
@fa-var-header: "\f1dc";
@fa-var-headphones: "\f025";
@fa-var-heart: "\f004";
@fa-var-heart-o: "\f08a";
@fa-var-history: "\f1da";
@fa-var-home: "\f015";
@fa-var-hospital-o: "\f0f8";
@fa-var-html5: "\f13b";
@fa-var-image: "\f03e";
@fa-var-inbox: "\f01c";
@fa-var-indent: "\f03c";
@fa-var-info: "\f129";
@fa-var-info-circle: "\f05a";
@fa-var-inr: "\f156";
@fa-var-instagram: "\f16d";
@fa-var-institution: "\f19c";
@fa-var-italic: "\f033";
@fa-var-joomla: "\f1aa";
@fa-var-jpy: "\f157";
@fa-var-jsfiddle: "\f1cc";
@fa-var-key: "\f084";
@fa-var-keyboard-o: "\f11c";
@fa-var-krw: "\f159";
@fa-var-language: "\f1ab";
@fa-var-laptop: "\f109";
@fa-var-leaf: "\f06c";
@fa-var-legal: "\f0e3";
@fa-var-lemon-o: "\f094";
@fa-var-level-down: "\f149";
@fa-var-level-up: "\f148";
@fa-var-life-bouy: "\f1cd";
@fa-var-life-ring: "\f1cd";
@fa-var-life-saver: "\f1cd";
@fa-var-lightbulb-o: "\f0eb";
@fa-var-link: "\f0c1";
@fa-var-linkedin: "\f0e1";
@fa-var-linkedin-square: "\f08c";
@fa-var-linux: "\f17c";
@fa-var-list: "\f03a";
@fa-var-list-alt: "\f022";
@fa-var-list-ol: "\f0cb";
@fa-var-list-ul: "\f0ca";
@fa-var-location-arrow: "\f124";
@fa-var-lock: "\f023";
@fa-var-long-arrow-down: "\f175";
@fa-var-long-arrow-left: "\f177";
@fa-var-long-arrow-right: "\f178";
@fa-var-long-arrow-up: "\f176";
@fa-var-magic: "\f0d0";
@fa-var-magnet: "\f076";
@fa-var-mail-forward: "\f064";
@fa-var-mail-reply: "\f112";
@fa-var-mail-reply-all: "\f122";
@fa-var-male: "\f183";
@fa-var-map-marker: "\f041";
@fa-var-maxcdn: "\f136";
@fa-var-medkit: "\f0fa";
@fa-var-meh-o: "\f11a";
@fa-var-microphone: "\f130";
@fa-var-microphone-slash: "\f131";
@fa-var-minus: "\f068";
@fa-var-minus-circle: "\f056";
@fa-var-minus-square: "\f146";
@fa-var-minus-square-o: "\f147";
@fa-var-mobile: "\f10b";
@fa-var-mobile-phone: "\f10b";
@fa-var-money: "\f0d6";
@fa-var-moon-o: "\f186";
@fa-var-mortar-board: "\f19d";
@fa-var-music: "\f001";
@fa-var-navicon: "\f0c9";
@fa-var-openid: "\f19b";
@fa-var-outdent: "\f03b";
@fa-var-pagelines: "\f18c";
@fa-var-paper-plane: "\f1d8";
@fa-var-paper-plane-o: "\f1d9";
@fa-var-paperclip: "\f0c6";
@fa-var-paragraph: "\f1dd";
@fa-var-paste: "\f0ea";
@fa-var-pause: "\f04c";
@fa-var-paw: "\f1b0";
@fa-var-pencil: "\f040";
@fa-var-pencil-square: "\f14b";
@fa-var-pencil-square-o: "\f044";
@fa-var-phone: "\f095";
@fa-var-phone-square: "\f098";
@fa-var-photo: "\f03e";
@fa-var-picture-o: "\f03e";
@fa-var-pied-piper: "\f1a7";
@fa-var-pied-piper-alt: "\f1a8";
@fa-var-pied-piper-square: "\f1a7";
@fa-var-pinterest: "\f0d2";
@fa-var-pinterest-square: "\f0d3";
@fa-var-plane: "\f072";
@fa-var-play: "\f04b";
@fa-var-play-circle: "\f144";
@fa-var-play-circle-o: "\f01d";
@fa-var-plus: "\f067";
@fa-var-plus-circle: "\f055";
@fa-var-plus-square: "\f0fe";
@fa-var-plus-square-o: "\f196";
@fa-var-power-off: "\f011";
@fa-var-print: "\f02f";
@fa-var-puzzle-piece: "\f12e";
@fa-var-qq: "\f1d6";
@fa-var-qrcode: "\f029";
@fa-var-question: "\f128";
@fa-var-question-circle: "\f059";
@fa-var-quote-left: "\f10d";
@fa-var-quote-right: "\f10e";
@fa-var-ra: "\f1d0";
@fa-var-random: "\f074";
@fa-var-rebel: "\f1d0";
@fa-var-recycle: "\f1b8";
@fa-var-reddit: "\f1a1";
@fa-var-reddit-square: "\f1a2";
@fa-var-refresh: "\f021";
@fa-var-renren: "\f18b";
@fa-var-reorder: "\f0c9";
@fa-var-repeat: "\f01e";
@fa-var-reply: "\f112";
@fa-var-reply-all: "\f122";
@fa-var-retweet: "\f079";
@fa-var-rmb: "\f157";
@fa-var-road: "\f018";
@fa-var-rocket: "\f135";
@fa-var-rotate-left: "\f0e2";
@fa-var-rotate-right: "\f01e";
@fa-var-rouble: "\f158";
@fa-var-rss: "\f09e";
@fa-var-rss-square: "\f143";
@fa-var-rub: "\f158";
@fa-var-ruble: "\f158";
@fa-var-rupee: "\f156";
@fa-var-save: "\f0c7";
@fa-var-scissors: "\f0c4";
@fa-var-search: "\f002";
@fa-var-search-minus: "\f010";
@fa-var-search-plus: "\f00e";
@fa-var-send: "\f1d8";
@fa-var-send-o: "\f1d9";
@fa-var-share: "\f064";
@fa-var-share-alt: "\f1e0";
@fa-var-share-alt-square: "\f1e1";
@fa-var-share-square: "\f14d";
@fa-var-share-square-o: "\f045";
@fa-var-shield: "\f132";
@fa-var-shopping-cart: "\f07a";
@fa-var-sign-in: "\f090";
@fa-var-sign-out: "\f08b";
@fa-var-signal: "\f012";
@fa-var-sitemap: "\f0e8";
@fa-var-skype: "\f17e";
@fa-var-slack: "\f198";
@fa-var-sliders: "\f1de";
@fa-var-smile-o: "\f118";
@fa-var-sort: "\f0dc";
@fa-var-sort-alpha-asc: "\f15d";
@fa-var-sort-alpha-desc: "\f15e";
@fa-var-sort-amount-asc: "\f160";
@fa-var-sort-amount-desc: "\f161";
@fa-var-sort-asc: "\f0de";
@fa-var-sort-desc: "\f0dd";
@fa-var-sort-down: "\f0dd";
@fa-var-sort-numeric-asc: "\f162";
@fa-var-sort-numeric-desc: "\f163";
@fa-var-sort-up: "\f0de";
@fa-var-soundcloud: "\f1be";
@fa-var-space-shuttle: "\f197";
@fa-var-spinner: "\f110";
@fa-var-spoon: "\f1b1";
@fa-var-spotify: "\f1bc";
@fa-var-square: "\f0c8";
@fa-var-square-o: "\f096";
@fa-var-stack-exchange: "\f18d";
@fa-var-stack-overflow: "\f16c";
@fa-var-star: "\f005";
@fa-var-star-half: "\f089";
@fa-var-star-half-empty: "\f123";
@fa-var-star-half-full: "\f123";
@fa-var-star-half-o: "\f123";
@fa-var-star-o: "\f006";
@fa-var-steam: "\f1b6";
@fa-var-steam-square: "\f1b7";
@fa-var-step-backward: "\f048";
@fa-var-step-forward: "\f051";
@fa-var-stethoscope: "\f0f1";
@fa-var-stop: "\f04d";
@fa-var-strikethrough: "\f0cc";
@fa-var-stumbleupon: "\f1a4";
@fa-var-stumbleupon-circle: "\f1a3";
@fa-var-subscript: "\f12c";
@fa-var-suitcase: "\f0f2";
@fa-var-sun-o: "\f185";
@fa-var-superscript: "\f12b";
@fa-var-support: "\f1cd";
@fa-var-table: "\f0ce";
@fa-var-tablet: "\f10a";
@fa-var-tachometer: "\f0e4";
@fa-var-tag: "\f02b";
@fa-var-tags: "\f02c";
@fa-var-tasks: "\f0ae";
@fa-var-taxi: "\f1ba";
@fa-var-tencent-weibo: "\f1d5";
@fa-var-terminal: "\f120";
@fa-var-text-height: "\f034";
@fa-var-text-width: "\f035";
@fa-var-th: "\f00a";
@fa-var-th-large: "\f009";
@fa-var-th-list: "\f00b";
@fa-var-thumb-tack: "\f08d";
@fa-var-thumbs-down: "\f165";
@fa-var-thumbs-o-down: "\f088";
@fa-var-thumbs-o-up: "\f087";
@fa-var-thumbs-up: "\f164";
@fa-var-ticket: "\f145";
@fa-var-times: "\f00d";
@fa-var-times-circle: "\f057";
@fa-var-times-circle-o: "\f05c";
@fa-var-tint: "\f043";
@fa-var-toggle-down: "\f150";
@fa-var-toggle-left: "\f191";
@fa-var-toggle-right: "\f152";
@fa-var-toggle-up: "\f151";
@fa-var-trash-o: "\f014";
@fa-var-tree: "\f1bb";
@fa-var-trello: "\f181";
@fa-var-trophy: "\f091";
@fa-var-truck: "\f0d1";
@fa-var-try: "\f195";
@fa-var-tumblr: "\f173";
@fa-var-tumblr-square: "\f174";
@fa-var-turkish-lira: "\f195";
@fa-var-twitter: "\f099";
@fa-var-twitter-square: "\f081";
@fa-var-umbrella: "\f0e9";
@fa-var-underline: "\f0cd";
@fa-var-undo: "\f0e2";
@fa-var-university: "\f19c";
@fa-var-unlink: "\f127";
@fa-var-unlock: "\f09c";
@fa-var-unlock-alt: "\f13e";
@fa-var-unsorted: "\f0dc";
@fa-var-upload: "\f093";
@fa-var-usd: "\f155";
@fa-var-user: "\f007";
@fa-var-user-md: "\f0f0";
@fa-var-users: "\f0c0";
@fa-var-video-camera: "\f03d";
@fa-var-vimeo-square: "\f194";
@fa-var-vine: "\f1ca";
@fa-var-vk: "\f189";
@fa-var-volume-down: "\f027";
@fa-var-volume-off: "\f026";
@fa-var-volume-up: "\f028";
@fa-var-warning: "\f071";
@fa-var-wechat: "\f1d7";
@fa-var-weibo: "\f18a";
@fa-var-weixin: "\f1d7";
@fa-var-wheelchair: "\f193";
@fa-var-windows: "\f17a";
@fa-var-won: "\f159";
@fa-var-wordpress: "\f19a";
@fa-var-wrench: "\f0ad";
@fa-var-xing: "\f168";
@fa-var-xing-square: "\f169";
@fa-var-yahoo: "\f19e";
@fa-var-yen: "\f157";
@fa-var-youtube: "\f167";
@fa-var-youtube-play: "\f16a";
@fa-var-youtube-square: "\f166";



// ========================================================================
// List variables
// ========================================================================

@am-list-bg:               #fff;
@am-list-border:           #dedede;
@am-list-border-radius: @global-border-radius;

@am-list-hover-bg:         #f5f5f5;
@am-list-active-color:     @component-active-color;
@am-list-active-bg:        @component-active-bg;
@am-list-active-border:    @am-list-active-bg;

// @am-list-link-color:     @gray-dark;
// @am-list-link-hd-color:  @gray-darker;



// ========================================================================
// Nav variables
// ========================================================================

@nav-link-padding:                          0.4em 1em;
@nav-link-hover-bg:                         @gray-lighter;
@nav-link-border-radius: @global-border-radius;

@nav-active-link-bg:                        @component-active-bg;
@nav-active-link-color:                     @component-active-color;

@nav-header-font-size:                      100%;
@nav-header-font-weight:                    bold;
@nav-header-text-transform:                 uppercase;
@nav-header-margin-top:                     1em;
@nav-header-color:                          @gray;

@nav-disabled-link-color:                   @gray-light;
@nav-disabled-link-hover-color:             @gray-light;


// Nav -> Tabs
// ------------------------------------------------------------------------

@nav-tabs-border-color:                     #ddd;

@nav-tabs-link-hover-border-color:          @gray-lighter;

@nav-tabs-active-link-hover-bg:             @body-bg;
@nav-tabs-active-link-hover-color:          @gray;
@nav-tabs-active-link-hover-border-color:   #ddd;

@nav-tabs-justify-link-border-color:            #ddd;
@nav-tabs-justify-active-link-border-color:     @body-bg;



// ========================================================================
// Topbar variables
// ========================================================================

@topbar-height:                    50px;
@topbar-padding:                   0 10px;
@topbar-margin-bottom:             @global-spacing;
@topbar-padding-horizontal:        10px;
@topbar-padding-vertical:          10px;
@topbar-collapse-max-height:       280px;

@topbar-spacing-vertical:          8px;

@topbar-default-color:             #666;
@topbar-default-bg:                #f8f8f8;
@topbar-default-border:            #ddd;

// default links
@topbar-default-link-color:                #666;
@topbar-default-link-hover-color:          #333;
@topbar-default-link-active-color:         @global-primary;
@topbar-default-link-active-bg:            transparent;
@topbar-default-link-disabled-color:       #ccc;
@topbar-default-link-disabled-bg:          transparent;

// brand label
@topbar-default-brand-color:               @topbar-default-link-color;
@topbar-default-brand-hover-color:         darken(@topbar-default-brand-color, 10%);
@topbar-default-brand-hover-bg:            transparent;


// Inverted Topbar

// Reset inverted basics
@topbar-inverse-color:                      @gray-lighter;
@topbar-inverse-bg:                         @global-primary;
@topbar-inverse-border:                     darken(@topbar-inverse-bg, 10%);

// Inverted links
@topbar-inverse-link-color:                 @gray-lighter;
@topbar-inverse-link-hover-color:           #fff;
@topbar-inverse-link-hover-bg:              rgba(0, 0, 0, 0.05);
@topbar-inverse-link-active-color:          @topbar-inverse-link-hover-color;
@topbar-inverse-link-active-bg:             rgba(0, 0, 0, 0.1);
@topbar-inverse-link-disabled-color:        #444;
@topbar-inverse-link-disabled-bg:           transparent;

@topbar-inverse-brand-color:               @white;
@topbar-inverse-brand-hover-color:         @white;
@topbar-inverse-brand-hover-bg:            transparent;



// ========================================================================
// Pagination variables
// ========================================================================

@pagination-margin:                    1.5rem;
@pagination-padding:                   0.5em 1em;
@pagination-line-height:               1.2;
@pagination-bg:                        #fff;
@pagination-border:                    #ddd;
@pagination-color:                     @gray-light;

@pagination-hover-bg:                  @gray-lighter;

@pagination-active-bg:                 @global-primary;
@pagination-active-color:              #fff;

@pagination-disabled-color:            @gray-light;



// ========================================================================
// Panel variables
// ========================================================================

@panel-bg:                    @white;
@panel-border-radius: @global-border-radius;
@panel-hd-padding:            .6rem 1.25rem;
@panel-bd-padding:            1.25rem;

@panel-footer-bg:             #f5f5f5;
@panel-inner-border:          @global-border;
@panel-footer-padding:       .6rem 1.25rem;

@panel-default-bd:            @global-border;
@panel-default-hd-bg:         #f5f5f5;
@panel-default-text:          #444;

@panel-primary-bd:            lighten(@global-primary, 5%);;
@panel-primary-hd-bg:         @global-primary;
@panel-primary-text:          #fff;

@panel-secondary-bd:          lighten(@global-secondary, 30%);
@panel-secondary-hd-bg:       rgba(red(@global-secondary), green(@global-secondary), blue(@global-secondary), .15);;
@panel-secondary-text:        darken(@global-secondary, 8%);

@panel-success-bd:            lighten(@global-success, 30%);
@panel-success-hd-bg:         rgba(red(@global-success), green(@global-success), blue(@global-success), .15);
@panel-success-text:          @global-success;

@panel-warning-bd:            lighten(@global-warning, 30%);
@panel-warning-hd-bg:         rgba(red(@global-warning), green(@global-warning), blue(@global-warning), .15);
@panel-warning-text:          @global-warning;

@panel-danger-bd:             lighten(@global-danger, 30%);;
@panel-danger-hd-bg:          rgba(red(@global-danger), green(@global-danger), blue(@global-danger), .15);;
@panel-danger-text:           @global-danger;



// ========================================================================
// Progress variables
// ========================================================================

@progress-bg:               #f5f5f5;
@progress-bar-color:        @white;
@progress-bar-font-size:    @font-size-xs;
@progress-bar-bg:           @global-primary;
@progress-bar-secondary-bg: @global-secondary;
@progress-bar-success-bg:   @global-success;
@progress-bar-warning-bg:   @global-warning;
@progress-bar-danger-bg:    @global-danger;

@progress-height:           @line-height-computed;
@progress-height-xs:      .6rem;
@progress-height-sm:     1.2rem;



// ========================================================================
// Thumbnail variables
// ========================================================================

@thumbnail-padding:         2px;
@thumbnail-bg:              @white;
@thumbnail-border:          #ddd;
@thumbnail-border-radius: @global-border-radius;
@thumbnail-hover-border:    @link-color;
@thumbnail-hover-bg: @white;

@thumbnail-caption-padding: .8rem;
@thumbnail-caption-color:   #333;



// ========================================================================
// Utility variables
// ========================================================================

@utility-scrollable-height: 240px;




// ========================================================================
// JavaScript Compent
// ========================================================================


// Dropdown
// ========================================================================

@dropdown-bg:                    #fff;
@dropdown-border:                rgba(0,0,0,.15);
@dropdown-fallback-border:       #ccc;
@dropdown-divider-bg:            #e5e5e5;

@dropdown-link-color:            @gray-dark;
@dropdown-link-hover-color:      darken(@gray-dark, 5%);
@dropdown-link-hover-bg:         #f5f5f5;

@dropdown-link-active-color:     @component-active-color;
@dropdown-link-active-bg:        @component-active-bg;

@dropdown-link-disabled-color:   @gray-light;

@dropdown-header-color:          @gray-light;

@dropdown-caret-color:           #000;

@caret-width-base: 6px;







// Off-canvas
// ========================================================================

@offcanvas-z-index:                   (@global-z-index + 10);
@offcanvas-dimmer-background:                rgba(0,0,0,0.1);
@offcanvas-bar-width:                 270px;
@offcanvas-bar-background:            #333;



// plugin - modal
// =======================================================================

//** Padding applied to the modal body
@modal-inner-padding:         20px;

//** Padding applied to the modal title
@modal-title-padding:         15px;
//** Modal title line-height
@modal-title-line-height:     @line-height-base;

//** Background color of modal content area
@modal-content-bg:                             #fff;
//** Modal content border color
@modal-content-border-color:                   rgba(0,0,0,.2);
//** Modal content border color **for IE8**
@modal-content-fallback-border-color:          #999;

//** Modal backdrop background color
@modal-backdrop-bg:           #000;
//** Modal backdrop opacity
@modal-backdrop-opacity:      .5;
//** Modal header border color
@modal-header-border-color:   #e5e5e5;
//** Modal footer border color
@modal-footer-border-color:   @modal-header-border-color;

@modal-lg:                    900px;
@modal-md:                    600px;
@modal-sm:                    300px;